<template>
    <div id="templ">
        <div  class="row" v-for="(item,index) in datalist"  :key="index">
            <mt-switch class="switch" v-model="value[index]"></mt-switch>
            <img  class ="img" :src="item.thumb_path"  alt="商品图片">
           <div class="inforight">
               <h4 v-text="item.title"></h4>
               <div class="bottom">
                   <ul>
                       <li> <span>￥{{item.sell_price}}</span></li>
                       <li>
                           <carinputnumber :initcount="item.cou" :goodsid="item.id"  @cardataobj="getinputNumber"></carinputnumber>
                       </li>
                       <li> <a href="javascript:void(0)"  @click="delrow(index,item.id)">删除</a></li>
                   </ul>
               </div>
           </div>
        </div>
        <!--总计部分-->
        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计(不含运费)</li>
                    <li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
                </ul>
            </div>
            <div class="button">
                <mt-button type="danger" size="small">去结算</mt-button>
            </div>
        </div>
        {{value}}
    </div>
</template>
<script>
import {getgoodsObj,updateData,removeItem} from '../../kits/localSg.js'
import  common  from "../../kits/common.js"
import { Toast } from 'mint-ui';
//导入购买组件
import carinputnumber from '../subcom/carinputNumber.vue'
export default {
    computed:{
      //计算总件数
      totalcount(){
          //this.value中的true有多少个
          var truearr =this.value.filter(function (item) {
              return item;
          })
          //计算商品总价格
          //当前商品的数量*单价(this.datalist)
          var amount=0;
          this.value.forEach((item,index)=>{
            //当前item为true,这个商品的是计算的
              if(item){
                  var count=this.datalist[index].cou;
                  var price =this.datalist[index].sell_price;
                  var itemamount =count*price
                  amount +=itemamount;
              }
          });
          this.totalAmount=amount;
          return truearr.length;
      }
    },
    //注册组件
    components:{
        carinputnumber
    },
    data(){
        return{
            value:[],
            datalist:[],
            totalAmount:0
        }
    },
    created(){
        this.getdatalist();
    },
    methods:{
        //删除一行数据
        delrow(index,goodsid){
            //将this.value移除.就会触发计算数学
            this.value.splice(index,1);
            //datalist
            this.datalist.splice(index,1);
            //localStroage
            removeItem(goodsid);
        },
        //获取购买区的值
        getinputNumber(resobj){
           // console.log(resobj);
            //更新loclaStorage
            updateData(resobj);
            //2.0跟新this.datalis
           for(var i=0;i<this.datalist.length;i++){
               if(this.datalist[i].id == resobj.goodsid ){
                    if(resobj.type=="add"){
                        this.datalist[i].cou =this.datalist[i].cou+1;
                    }else{
                        this.datalist[i].cou =this.datalist[i].cou+1;
                    }
                    break;
               }
           }
        },
        getdatalist(){
            //1.0从localstorage中获取所有的商品id
            var obj =getgoodsObj();

            //2.0 将id值按照api的参数格式提交给api
            var idstring ='';
            for(var key in obj){
                idstring += key +","
            }
            //要将最后一个,去掉
            idstring=idstring.substring(0,idstring.length-1);
           // console.log(idstring);
            //3.0ajax请求这个api获取到完整的商品信息赋值给datalist
            var url =common.apidomain+"/api/goods/getshopcarlist/"+idstring;
            this.$http.get(url).then(function (response) {
                var body =response.body;
                if(body.status !=0){
                    Toast(body.message);
                    return;
                }
                //将loclStorage中所有商品对应的count赋值给cou
               body.message.forEach((item) =>{
                   item.cou=obj[item.id];
                   this.value.push(false);
               })
                this.datalist =body.message;
            })
        }
    }
}
</script>
<style escoped>
.row{
    border-bottom: 1px solid rgba(0,0,0,0.3);
    height: 102px;
    display: flex;
    padding-top: 15px;
}
   .row  .switch{
     flex:0 0 52px;
    }
    .row .img{
        width: 75px;
        height: 75px;
        flex: 0 0 85px;
        margin-left: 5px;
    }
    .row .inforight{
        flex: 1;
        margin-left: 5px;
    }
    .row .inforight ul {
        padding-left: 0px;
    }
    .row .inforight li {
        list-style: none;
        display: inline-block;

    }
    .row .inforight h4{
        color: #0094ff;
        font-size: 14px;
    }
    .row .inforight .bottom li:first-child{
         color: red;
        margin-right: 5px;
    }
    .row .inforight .bottom li:last-child{
        margin-left: 5px;
    }
        #total{
            background-color: rgba(0,0,0,0.1);
            height: 100px;
            display: flex;
            padding:5px;
        }
        #total ul{
            padding-left: 0px;
        }
        #total li{
            list-style: none;
            font-size: 14px;
        }
        #total .button{
            flex:0 0 60px;
            margin:20px 0 0 0;
        }
        #total .desc{
            flex:1;
        }

</style>